<template>
    <!-- <el-dialog v-dialogDrag title="编辑企业" :visible="isShowEditDialog" @close="dialogClose" width="60%" :close-on-click-modal="false"> -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm"
            :disabled="show">
            <el-form-item label="企业名称：" prop="companyName">
                <el-input type="text" v-model="ruleForm.companyName">
                </el-input>
            </el-form-item>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="企业简称：" prop="abbreviated">
                        <el-input type="text" v-model="ruleForm.abbreviated">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="法人：" prop="corporate">
                        <el-input type="text" v-model="ruleForm.corporate">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="办公电话：" prop="phone">
                        <el-input type="text" v-model="ruleForm.phone">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="办公地址：" prop="address">
                        <el-input type="text" v-model="ruleForm.address">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="信用代码：" prop="creditCode">
                        <el-input type="text" v-model="ruleForm.creditCode">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="单位联系人：" prop="contact">
                        <el-input type="text" v-model="ruleForm.contact">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱：" prop="email">
                        <el-input type="text" v-model="ruleForm.email">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="微信号：" prop="wechat">
                        <el-input type="text" v-model="ruleForm.wechat">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="公众号：" prop="officialAccount">
                        <el-upload class="avatar-uploader" :action='actionAccount' list-type="picture-card"
                            :show-file-list="false" :on-success="accounthandleAvatarSuccess">
                            <img v-if="accountUrl" :src="accountUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公章：" prop="officialSeal">
                        <el-upload class="avatar-uploader" :action='actionSeal' list-type="picture-card"
                            :show-file-list="false" :on-success="sealhandleAvatarSuccess">
                            <img v-if="sealUrl" :src="sealUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="logo：" prop="logo">
                        <el-upload class="avatar-uploader" :action='actionLogo' list-type="picture-card"
                            :show-file-list="false" :on-success="logohandleAvatarSuccess">
                            <img v-if="logoUrl" :src="logoUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item v-if="!show">
                <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    <!-- </el-dialog> -->
</template>
<script>
import { updateInformation } from '@/api/systemManage/enterpriseMaage'
export default {
    name: 'enterpriseEdit',
    data () {
        return {
            ruleForm: {},
            actionAccount: '/api/company/gzhUpload',
            actionLogo: '/api/company/logoUpload',
            actionSeal: '/api/company/officialSealUpload',
            accountUrl: '',
            logoUrl: '',
            sealUrl: '',
            rules: {
                parentId: [
                    { required: false, message: '请输入父级企业名称', trigger: 'change' }
                ],
                companyName: [
                    { required: true, message: '请输入企业名称', trigger: 'change' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'change' }
                ],
                abbreviated: [
                    { required: true, message: '请输入企业简称', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入公司地址', trigger: 'change' }
                ],
                contact: [
                    { required: true, message: '请输入单位联系人姓名', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'change' }
                ],
                // creditCode: [
                //     { required: true, message: '请输入信用代码', trigger: 'change' }
                // ],
            },

        };
    },
    props: {
        isShowEditDialog: {
            type: Boolean
        },
        record: {
            type: Object
        },
        show: {
            type: Boolean
        }
    },
    methods: {
        sealhandleAvatarSuccess (file) {
            this.sealUrl = file.data;
            this.ruleForm.officialSeal = this.sealUrl;
        },
        logohandleAvatarSuccess (file) {
            this.logoUrl = file.data;
            this.ruleForm.logo = this.logoUrl;
        },
        accounthandleAvatarSuccess (file) {
            this.accountUrl = file.data;
            this.ruleForm.officialAccount = this.accountUrl;
        },
        submitForm () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params = {}
                    updateInformation(Object.assign(params, this.ruleForm)).then((res) => {
                        if (res) {
                            this.$message.success('操作成功！')
                            this.$emit('dialogClose')
                            this.$emit('Ok')
                        }
                    })
                }
                else {
                    return
                }
            });
        },
        // dialogClose () {
        //     this.$emit('Ok')
        //     this.$emit('dialogClose')
        // }
    },
    mounted () {
        this.ruleForm = Object.assign({},this.record);
        this.logoUrl = this.record.logo
        this.sealUrl = this.record.officialSeal
        this.accountUrl = this.record.officialAccount
    }
}
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}
</style>